<template>
<div>
  <div class="top">
      智慧医疗后台管理系统
    </div>
    <div class="app-container">

    <div class="app-container-left">
    <p class="pp"><i class="el-icon-s-tools"> </i>
     <i class="el-icon-d-arrow-right"></i></p>
     <p class="pic"><img alt="Vue logo" src="../assets/7_r2_c2.png"></p>
     <h3 class="yj">阮晶  管理员</h3>
     <ul class="uul">
       <router-link class="li" to='/hms/hospital'><li >医院管理</li></router-link>
       <router-link class="li" to='/hms/doctor'><li >患者管理</li></router-link>
       <router-link class="li" to='/hms/office'><li >审核管理</li></router-link>
     </ul>
    </div>
    <div class="app-container-right">

      <router-view></router-view>
    </div>
  </div>
</div>

</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss">
@import '@/assets/style/common.scss';
.app-container {
  width: 100vw; // 绝对的宽度 100 %
  height: 100vh;  // 绝对的高度 100
  display: flex;
  .app-container-left {

    width: 330px;
    border-right: 1px solid red;
    height: 935px;
    background: #253044;

  }
  .app-container-right {
    flex: 8;
  }

}
 .top{
    background: #4C83DF;
    height: 100px;
    font-size: 40px;
    line-height: 100px;
    text-indent: 25px;
    width: 100%;
    color:#ffffff
  }
  .pp{
    display: flex;
    color:#fff;
    font-size: 30px;
    justify-content: space-between;
    margin: 25px 15px;
  }
  .pic{
    text-align: center;
  }
  .uul{
    text-align: center;
    font-size: 30px;
    color: #ffffff;
    line-height: 85px;
  }
  .yj{
    font-size: 35px;
    text-align: center;
    color: #ffffff;
    line-height: 100px;
  }
 a{
   text-decoration: none;
   color:#fff
 }
</style>
